<template>
  <div class="container" ref="container" @scroll="handleScroll">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script setup lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

import { ref, onMounted, onBeforeUnmount } from "vue";

interface Item {
  id: number;
  text: string;
}

const container = ref<HTMLDivElement | null>(null);
const items = ref<Item[]>([]);

function handleScroll() {
  console.log("scoll");
  if (container.value?.scrollTop === 0) {
    refreshData();
  }
}

function refreshData() {
  // 刷新数据的操作，例如重新从接口获取数据
  // ...
  // items.value = newItems;
  console.log("到顶了");
}

onMounted(() => {
  container.value?.addEventListener("scroll", handleScroll);
});

// 在组件卸载时移除事件监听器
onBeforeUnmount(() => {
  container.value?.removeEventListener("scroll", handleScroll);
});

// @Options({
//   components: {
//     HelloWorld,
//   },
// })
</script>
